import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ElmBottomNavigatorBar extends StatefulWidget {
  const ElmBottomNavigatorBar({super.key});

  @override
  State<ElmBottomNavigatorBar> createState() => _ElmBottomNavigatorBarState();
}

class _ElmBottomNavigatorBarState extends State<ElmBottomNavigatorBar> {
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    //将BottomNavigationBar 用Theme包起来，然后修改data属性，进行如下修改，可以去除点击产生的水波涟漪效果
    return Theme(
        data: ThemeData(
          brightness: Brightness.light,
          splashColor: Colors.transparent,
          highlightColor: Colors.transparent
        ),
        child: BottomNavigationBar(
      items: <BottomNavigationBarItem>[
        BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页",),
        BottomNavigationBarItem(icon: Icon(Icons.find_in_page_outlined), label: "发现"),
        BottomNavigationBarItem(icon: Icon(Icons.reorder), label: "订单"),
        BottomNavigationBarItem(icon: Icon(Icons.person), label: "我的"),
      ],
      currentIndex: _selectedIndex,
      selectedItemColor: Colors.blueAccent.shade400,
      unselectedItemColor: Colors.grey.shade400,
      showUnselectedLabels: true,
      //取消自带导航栏的 点击局部区域按钮的 字体变大效果
      unselectedFontSize: 12,
      selectedFontSize: 12,
      //取消自带导航栏的 点击局部区域按钮的拉伸效果
      type: BottomNavigationBarType.fixed,
      onTap: _onItemTapped,
    )
    );
  }


  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
}



